@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#tree{width:100vw;height: auto;position: absolute;margin: 0 auto;z-index: 99;transform: translateX(-12.5vw);}
.left{display: none;}
.top{height: 4vh;overflow: hidden;}
.media{clear: both;transform: translateX(10vw) scale(1.82,1) ;overflow-x: hidden;}
.media p,.media a,.media h2,.media svg,.media li,.media img, .media input{transform: scale(1,1.82);}
#zjt{height: 20%;width: 92%;border-radius: 10px;border: 0px solid #F2F2F2;margin: 10% auto; 
overflow: hidden;
position: relative;
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
  				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
				 background-image: linear-gradient(270deg,rgba(42,178,182,1) 0%, rgba(42,178,182,0) 100%);
				 padding: 1%;}
#zjb input[type=submit] {
font-size: 30px;
float: right;
  width: 100%;
height: 70px;
background-color: #4CAF50;
box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
			 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
color: white;
border: none;
border-radius: 20px;
margin: 50px -5px 50px 0px ;
cursor: pointer;
}



	#zji img{width: 100%;height: 60%;position: absolute;opacity: 0.8;top: 80px;}
}
@media only screen and (min-device-width : 480px){
	#tree{width:55vw;height: auto;position: absolute;margin: 0 auto;z-index: 99;}
	#zji img{width: 100%;height: 100%;position: relative;opacity: 0.8;}
	#zjt{height: 30%;width: 92%;border-radius: 10px;border: 0px solid #F2F2F2;margin: 3% auto;
		box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
	  				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
					 background-image: linear-gradient(270deg,rgba(42,178,182,1) 0%, rgba(42,178,182,0) 100%);
					 padding: 1%;}
 #zjb input[type=submit] {
	font-size: 35px;
	float: right;
	  width: 80%;
   height: 70px;
   background-color: #4CAF50;
   box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
   color: white;
   border: none;
   border-radius: 20px;
   margin: 30px 30px 30px 0 ;
   cursor: pointer;
 }
	
}
@font-face{
	font-family: 'ops';
	src:url('./OPS.ttf');
}
*{margin: 0;padding: 0;font-family: "ops";transition: opacity 3s ease-in 0s,width 0.4s linear 0s,background-color 0.4s linear 0s,width 0.4s linear 0s,color 0.4s linear 0s,background 0.4s linear 0s,height 0.4s linear 0s;}

body{
	overflow: hidden;
	background-color: #262626;
	background-image: url(../img/xmba.png);
	background-size: 100vw 92vh;
	background-position:bottom;
}
.top{
	width: 100vw;
	height: 8vh;
	background-color: #262626;
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
}
.top>a{
	float: left;
	margin: 0px 1.25rem;
	font-family: 'ops';
	height: 4.6875rem;
	line-height: 4.6875rem;
	color: #f2f2f2;
	font-size: 1.375rem;
	text-decoration: none;
}
#tfirst{
	margin: 0.625rem 0.625rem 0 0.625rem ;
}
#tsecond{
	float: right;
}
#tthird{
	float: right;
	margin: 0px 1.25rem 0px 5rem;
}
.content{
	position: absolute;
	transform: translateX(12.5vw);
	height: 92vh;
		width: 65vw;
}
.content:after {
            content: "";
            clear: left;
            display: block;
        }
.media{
	overflow-y: scroll;
	height: 92vh;
	float: left;
	margin: 0 auto;
	width: 55vw;
	background-color: #262626;
	background-image: linear-gradient(180deg, #003000 40%, #30c9cd 100%);
	background-size: 150% 150%;
	background-position: center;
}
.media::-webkit-scrollbar {
    display: none;
}
.media1{
	overflow: hidden;
	position: relative;
	height: 92vh;
	width: 55vw;
	margin: 0 auto;
	background-color: white;
}
#tree{height: auto;position: absolute;margin: 0 auto;z-index: 99;}
#t1{position: absolute;width:85%;height: auto;left: 15%;top: -20%;}
#t2{position: absolute;width:100%;height: auto;}

.left{
	position: relative;
	transform: translateY(2.5vh);
	float: left;
	width: 10vw;
}
.left #l{
	overflow: hidden;
	height: 5vh;
	width: 10vw;
	border-radius:0.125rem 0 0 1.5625rem;
	background: rgba(38,38,38,0);
	box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2), 
				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
	margin-bottom: 2.5vh;
}
.left .lc{
	border-radius:0 1.5625rem 0.125rem 0;
	display: inline-block;
	width: 4vw;
	height: 3.125rem;
}
.lc#lc1{
	background: #262626;
}
#al1:hover>#l>#lc1{width: 10vw;}
.lc#lc2{
	background: #4d0500;
}
#lc4{width: 12vw;}
#al2:hover>#l>#lc2{width: 10vw;}
.lc#lc3{
	background: #1d1e5c;
}
#al3:hover>#l>#lc3{width: 10vw;}
.lc#lc4{
	background: #003000;
}
#al4:hover>#l>#lc4{width: 10vw;}
.lc#lc5{
	background: #002a45;
}
#al5:hover>#l>#lc5{width: 10vw;}
.lc#lc6{
	background: #3d0c4f;
}
#al6:hover>#l>#lc6{width: 10vw;}
.left p{
	position: fixed;
	color: #f2f2f2;
	margin: -5.5vh 0 0 5vw;
	font-size: 1.1vw;
	vertical-align:middle;
	line-height: 5vh;
	height: 5vh;
}
.top a:hover{
	color: #2fc7cc;
}

#zji{display: inline-block;height: 96%;position: relative;width: 70%;box-shadow:  -0.3125rem 0.3125rem 0.3125rem rgba(0,0,0,0.2),
  				 0.3125rem -0.3125rem 0.3125rem rgba(0,0,0,0.2);
				 overflow: hidden;
				 font-size: 60px;
				 z-index: 99;
				 background: linear-gradient(to bottom, rgba(51,13,105,1) , rgba(48,201,205,1)) ; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}
 #zji p{color: #F2F2F2;position: absolute;top: 12%;left: 8%;opacity: 0;}
 #zji:hover p{opacity: 1;}
 #zji:hover img{opacity: 0.2;}
 #zjb{width: 25%;height: 100%;display: inline-block;margin: 0 2% 0 2% ;}
.icon{position: absolute;z-index: 99;background-color: white;}